<script setup>
import * as echarts from 'echarts'
import {onMounted} from "vue";
import {ref} from "vue";
import chartApi from "@/api/chart.js";

const chartRef = ref()

onMounted(() => {
    //echarts.init(document.getElementById('myChart'));
    const myChart = echarts.init(chartRef.value);
    chartApi.selectHotCourse().then((result) => {
        if (result.code == 0) {
            const option = {
                title: {
                    text: '人气课程Top10',
                    textStyle: {
                        color: '#161D23',
                        fontWeight: 'bold',
                        fontSize: '16px',
                    },
                    left: '10px',
                    top: '10px',
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [
                    {
                        name: '课程预约',
                        type: 'pie',
                        radius: '50%',
                        data: result.data,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }
    }).catch(error => {
        console.error('获取热门课程数据失败:', error);
        // 如果API失败，显示空图表
        const option = {
            title: {
                text: '人气课程Top10',
                textStyle: {
                    color: '#161D23',
                    fontWeight: 'bold',
                    fontSize: '16px',
                },
                left: '10px',
                top: '10px',
            },
            series: [
                {
                    name: '课程预约',
                    type: 'pie',
                    radius: '50%',
                    data: [],
                }
            ]
        };
        myChart.setOption(option);
    })

    window.onresize = function () {
        myChart.resize();
    };
})

</script>

<template>
    <div  ref="chartRef" style="width: 100%;height: 100%"></div>
</template>

<style scoped>

</style>

